<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.common.key.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="../libraries/jquery.min.js" ></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A stepped Line chart with Trace effect</title>
    
    <meta name="description" content="A stepped Line chart that uses the Trace effect" />
</head>
<body>

    <h1>A stepped Line chart with Trace effect</h1>
    
    <p>
        Also has a dashed line drawn at Y=50
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    
    <script>
        window.onload = function ()
        {
            var line = new RGraph.Line('cvs', [70,60,80,50,50,60,70,60,50,40,50,50], [20,30,50,40,30,50,40,30,60,50,10,20]);
            line.Set('chart.gutter.left', 45);
            line.Set('chart.gutter.right', 100);
            line.Set('chart.background.grid.autofit.numvlines', 11);
            line.Set('chart.background.grid.autofit.numhlines', 8);
            line.Set('chart.noxaxis', true);
            line.Set('chart.stepped', true);
            line.Set('chart.units.pre', '$');
            line.Set('chart.units.post', 'K');
            line.Set('chart.ylabels.count', 8);
            line.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
            line.Set('chart.key', ['Credit limit','MTM + AR','AR','MTM']);
            line.Set('chart.key.position.graph.boxed', false);
            line.Set('chart.key.position.x', line.canvas.width - line.Get('chart.gutter.right'));
            line.Set('chart.key.color.shape', 'circle');
            line.Set('chart.linewidth', 3);
            
            line.ondraw = function (obj)
            {
                var y  = Math.round(obj.getYCoord(50));
                var x1 = obj.Get('chart.gutter.left');
                var x2 = obj.canvas.width - obj.Get('chart.gutter.right');

                obj.context.beginPath();
                    obj.context.strokeStyle = 'orange';
                    RGraph.DashedLine(obj.context, x1, y, x2, y);
                obj.context.stroke();
            }

            //line.Draw();
            RGraph.Effects.Line.jQuery.Trace(line);
        }
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>